import React, { useState } from 'react';
import '../immer/immer.less';

function Destroy() {
  // UI 节点位置上的内容发生变化时，组件会被销毁（ 比如说这个节点之前是个组件，现在被替换成了 null ）
  // 组件在页面上被销毁，组件的状态会清空
  // 当存在 key 值时, 不管 UI 节点位置上的内容是否发生变化, 只要 key 值发生了变化，原始组件就会被销毁

  // 疑问? 如果是css中display: none的方式，组件状态会不会重置
  const [ count, setCount ] = useState(0);
  return (
    <div className="common-ele">
      <div onClick={() => setCount(count + 1)}>{ count }</div>
      <Child name={count} key={count} />
    </div>
  )
}

function Child({ name }) {
  const [ content, setContent ] = useState('');
  return (
    <>
      <div>name: { name }</div>
      <label>请输入: </label>
      <input onChange={(e) => setContent(e.target.value)} />
      <div>{ content }</div>
    </>
  )
}
export default Destroy;